<template>
  <el-form ref="form" class="abnormal_info" :model="alarmInfo" label-width="80px" label-position="left">
    <div class="form_head">异常检测配置</div>
    <div>
      <div class="wrap_head">
        <i></i>
        <span>通知信息</span>
      </div>
      <div class="abnormal_info_config">
        <div class="abnormal_info_config_item">
          <el-form-item label="通知人员" size="mini">
            <el-select v-model="form.region" placeholder="请选择通知人员">
              <el-option label="通知人员一" value="shanghai"></el-option>
              <el-option label="通知人员二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知手机" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="接受范围" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>
      </div>
    </div>
    <div>
      <div class="wrap_head">
        <i></i>
        <span>关注类型</span>
      </div>
      <div class="abnormal_info_config">
        <div class="abnormal_info_config_item">
          <el-form-item size="mini" label-width="2px">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
    </div>
    <div>
      <div class="wrap_head">
        <i></i>
        <span>报警升级时间</span>
      </div>
      <div class="abnormal_info_config">
        <div class="abnormal_info_config_item">
          <el-form-item label="报警升级(小时)时间" size="mini" label-width="140px">
            <el-input placeholder="示例" v-model="alarmInfo.alarmTime"></el-input>
          </el-form-item>
        </div>
      </div>
    </div>
    <div>
      <div class="wrap_head">
        <i></i>
        <span>升级通知人员</span>
      </div>
      <div class="abnormal_info_config">
        <div class="abnormal_info_config_item">
          <div class="front">第一次升级</div>
          <el-form-item label="人员名称" size="mini">
            <el-select v-model="form.region" placeholder="请选择人员名称">
              <el-option label="人员名称一" value="shanghai"></el-option>
              <el-option label="人员名称二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知手机" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="接受范围" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>
        <div class="abnormal_info_config_item">
          <div class="front">第二次升级</div>
          <el-form-item label="人员名称" size="mini">
            <el-select v-model="form.region" placeholder="请选择人员名称">
              <el-option label="人员名称一" value="shanghai"></el-option>
              <el-option label="人员名称二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知手机" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="接受范围" size="mini">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>
      </div>
    </div>
    <el-form-item class="wrap_foot">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    isEdit: {
      // 分为两种模式，true为编辑模式，false为新增模式
      type: Boolean,
      default: false
    },
    abnormalInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      ruleForm: {
        type: []
      },
      alarmInfo: {
        enterprise: "",
        region: "",
        alarmType: "",
        alarmDelayTime: "",
        conditionList: [{alarmFactor: 1, condition: 2,condition:1,relation: 2}],
        alarmDesc: "were",
        alarmNotify: true,
        alarmTime: ""
      },
      enterpriseList: [
        { enterpriseId: 1, enterpriseName: "企业一" },
        { enterpriseId: 2, enterpriseName: "企业二" }
      ],
      regionList: [
        { regionId: 1, regionName: "源一" },
        { regionId: 2, regionName: "源二" }
      ],
      alarmTypeList: [
        { alarmTypeId: 1, alarmTypeName: "报警类型一" },
        { alarmTypeId: 2, alarmTypeName: "报警类型二" }
      ],
      alarmFactorList: [
        { alarmFactorId: 1, alarmFactorName: "报警因子一" },
        { alarmFactorId: 2, alarmFactorName: "报警因子二" }
      ],
      conditionList: [
        { conditionId: 1, conditionName: "条件一" },
        { conditionId: 2, conditionName: "条件二" }
      ]
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    addCondition() {
      this.alarmInfo.conditionList.push({alarmFactor: "", condition: "",condition:"",relation: ""});
    },
    delCondition(index) {
      this.alarmInfo.conditionList.splice(index, 1)
    }
  }
};
</script>
<style lang="scss" scoped>
.form_head {
  font-size: 16px;
  color: #4398ff;
  padding: 10px 10px;
}
.abnormal_info_config {
  padding: 10px 20px;

  .abnormal_info_config_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  el-form-item {
    width: 300px;
  }
}
.abnormal_info_config_itemArea {
  .el-form-item {
    width: 92%;
  }
}
.wrap_head {
  position: relative;
  padding-left: 10px;
  i:nth-child(1) {
    display: inline-block;
    width: 3px;
    height: 20px;
    background: #1890ff;
    position: relative;
    top: 3px;
  }
  span {
    font-size: 16px;
    line-height: 20px;
  }
  .add {
    float: right;
    margin-right: 5%;
    border: 1px solid #ccc;
    cursor: pointer;
  }
}
.wrap_foot {
  padding-left: 38%;
}
.front{
  font-size: 14px;
  color: #606266;
  line-height: 28px;
  margin-right: 10px;
}
</style>
<style lang="scss">
.abnormal_info {
  .el-form-item {
    margin-left: 10px;
  }
  .abnormal_info_config {
    .el-input {
      width: 178px;
    }
  }
  .wrap_head {
    .el-button {
      float: right;
      margin-right: 2%;
      height: 20px;
      padding: 0 !important;
    }
  }
  .button_style{
    .el-button {
      color: red;
      float: right;
      height: 24px;
      position: relative;
      right: -20px;
      padding: 0 !important;
    }
  }
}
</style>
